<template>
    <div :class='$style.container'>
        <template v-for='(field, index) in props.fields' :key='index'>
            <div :class='$style.field'>
                <span :class='$style.label'>{{field.label}}：</span>
                <template v-if='field.type == "text" || field.type == "number" || field.type == undefined'>
                    <a-input :class='$style.ctr' size='mini' v-model:value='field.value' :placeholder='"输入" + field.label' allowClear />
                </template>
                <template v-if='field.type == "select"'>
                    <a-select :class='$style.ctr' v-model:value='field.value' :placeholder='"选择" + field.label' allowClear>
                        <template v-for='(item, index) in field.options' :key='index'>
                            <a-select-option :value='item[field.valueField || defaultValueField]'>{{item[field.labelField || defaultLabelField]}}</a-select-option>
                        </template>
                    </a-select>
                </template>
                <template v-if='field.type == "datePicker"'>
                    <a-date-picker :class='$style.ctr' v-model:value='field.value' :placeholder='"选择" + field.label' v-bind='field.options' allowClear />
                </template>
                <template v-if='field.type == "StockSelect"'>
                    <XStockSelect :class='$style.ctr' v-model:value='field.value'  :placeholder='"输入" + field.label' v-bind='field.options' allowClear />
                </template>
                <!-- <template v-if='field.type == "select"'>
                    <a-select>
                        <a-option v-for='item in field.options' :key='item[field.valueField || defaultValueField]' :label='item[field.labelField || defaultLabelField]' :value='item[field.valueField || defaultValueField]'></a-option>
                    </a-select>
                </template> -->
                <!-- <template v-if='field.type == "daterange"'>
                    <el-date-picker size='mini' v-model='field.value' value-format='YYYY-MM-DD' type="daterange" range-separator="至"></el-date-picker>
                </template> -->
            </div>
        </template>
        <a-button type='primary' @click='search'>搜 索</a-button>
        <slot></slot>
    </div>
</template>

<script lang='ts' setup>
    import { Filter } from '../types'
    interface Props {
        fields : Array<Filter>
    }

    const defaultValueField= 'id'
    const defaultLabelField = 'name'

    const props = defineProps<Props>()
    const emit = defineEmits<{
        (e : 'search', params : any) : void
    }>()

    function search() {
        let params:any = {}
        props.fields.forEach(field => {
            if(field.value) {
                if(field.transform) {
                    const value = field.transform(field.value)
                    if(value) {
                        if(typeof value === 'object') {
                            params = Object.assign(params, value)
                        }else {
                            params[field.name] = field.value
                        }
                    }
                }else {
                    params[field.name] = field.value
                }
                
            }
        })
        emit('search', params)
    }

</script>

<style scoped lang='scss' module>
    .container{
        display: flex;
        gap : 15px;
        flex-wrap: wrap;
    }
    .field{
        display: inline-flex;
        align-items: center;

        .label{white-space: nowrap;}

        .ctr{
            width: 150px;
        }
    }
</style>